<template>
  <div class="container">
    <div class="app-container">
      <el-row>
        <el-input v-model="pageParams.carNumber" placeholder="请输入车牌号码" style="width: 200px; margin: 20px;" />
        <el-select v-model="pageParams.paymentStatus" placeholder="缴纳状态" style="width: 150px; margin: 20px;">
          <el-option label="未选择" value="" />
          <el-option label="已缴纳" value="1" />
          <el-option label="未缴纳" value="0" />
        </el-select>
        <el-button type="primary" style="width: 100px; border-radius: 10px;" @click="serach">查询</el-button>
      </el-row>
      <el-table :data="list" style="width: 100%; margin-top: 20px;">
        <el-table-column align="center" type="index" label="序号" width="80" />
        <el-table-column align="center" prop="carNumber" label="车牌号码" />
        <el-table-column align="center" prop="chargeType" label="收费类型">
          <template #default="{row}">
            <span v-if="row.chargeType === 'card'">月卡</span>
            <span v-if="row.chargeType === 'temp'">临时停车</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="parkingTime" label="停车总时长" />
        <el-table-column align="center" prop="actualCharge" label="缴纳费用(元)" />
        <el-table-column align="center" prop="paymentStatus" label="缴纳状态">
          <template v-slot="{ row }">
            <span v-if="row.paymentStatus === 1">已缴纳</span>
            <span v-if="row.paymentStatus === 0">未缴纳</span>
          </template></el-table-column>
        <el-table-column align="center" prop="paymentMethod" label="缴纳方式">
          <template v-slot="{ row }">
            {{ row.paymentMethod === "Cash"? '现金' : (row.paymentMethod == "WeChat" ? '微信' : '支付宝') }}
          </template></el-table-column>
        <el-table-column align="center" prop="paymentTime" label="缴纳时间" />
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          :current-page="pageParams.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager,jumper, next"
          :total="pageParams.total"
          @current-change="changePage"
          @size-change="changePageSize"
        />
      </el-row>
    </div>
  </div>
</template>
<script>
import { getParkingPayMentListAPI } from '@/api'

export default {
  name: 'ParkingPayment',
  data() {
    return {
      pageParams: {
        carNumber: '',
        paymentStatus: '',
        page: 1,
        pageSize: 10,
        total: 0
      },
      list: []
    }
  },
  created() {
    this.getParkingPayMentList()
  },
  methods: {
    async getParkingPayMentList() {
      const { rows, total } = await getParkingPayMentListAPI(this.pageParams)
      this.list = rows
      this.pageParams.total = total
      console.log(this.list)
    },
    serach() {
      this.pageParams.page = 1
      this.getParkingPayMentList()
    },
    changePage(newPage) {
      this.pageParams.page = newPage
      this.getParkingPayMentList()
    },
    changePageSize(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getParkingPayMentList()
    }
  }
}
</script>
